<template>
	<div class="left-box">
		<div class="heade-wrapper">
			<a-select
				v-model="formId"
				class="heade-left-box"
			>
				<a-select-option
					v-for="it in formList"
					:value="it.formId"
					:key="it.formId"
				>
					{{ it.name }}
				</a-select-option>
			</a-select>
			<div class="heade-right-box">
				<a-input-search
					:placeholder="this.$i18n('form.input.extend.customcontrol.name.label')"
					v-model.trim="searchValue"
					@search="onSearch"
				>
				</a-input-search>
			</div>
		</div>

		<div class="content-wrapper">
			<scroll-list
				panel="WFDynamicForm"
				command="fieldList"
				ref="scrollList"
				:firstLoadSearch="false"
			/>
		</div>
	</div>
</template>

<script>
import scrollList from '@/components/scrollList';

export default {
	name: 'WFDynamicForm',
	components: {
		scrollList
	},
	inject: ['app'],
	data() {
		return {
			formId: '',
			formList: [],
			searchValue: '',

			accountTreeDisabled: true
		};
	},
	created() {
		const info = this.app().orgSelect.panels.find(
			(it) => it.name === 'WFDynamicForm'
		);
		if (!info) {
			return;
		}
		this.formList = info.extInfo.formList;
		if (this.formList && this.formList[0]) {
			this.formId = this.formList[0].formId;
		}
	},
	watch: {
		formId() {
			this.searchValue = '';
			this.onSearchData();
		}
	},
	methods: {
		onSearch(val) {
			this.$nextTick(() => {
				this.onSearchData();
			});
		},
		onSearchData() {
			if (!this.formId) {
				return;
			}
			this.$nextTick(() => {
				this.$refs.scrollList.initProps();
				const data = {
					keyword: this.searchValue,
					formId: this.formId
				};
				this.$refs.scrollList.search(data);
			});
		}
	}
};
</script>

<style scoped lang="scss">
</style>
